<template>
  <!-- 重点项目 -->
  <div class="zdxmPage" :id="scrollId">
    <div>
      <ul>
        <li
          v-for="(item, index) in zbslList"
          :key="index"
          @click="handleClick(item)"
        >
          <label style="width: 50%">{{ item.name }}</label>
          <label style="margin-left: 1%; width: 30%">
            分管领导:{{ item.fgbmleaderStr }}</label
          >
          <label style="margin-left: 1%; width: 20%"> {{ item.type }}</label>

          <!-- <div>
            <div :style="{ width: item.jd + '%' }"></div>

          </div> -->
          <!-- <b>{{ ZdxmData[index] }}%</b> -->
          <!-- <p><span v-if="item.pa00104 == 1">延</span></p> -->
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { anhuanProject } from "../utils/api";
export default {
  name: "Zdxm",

  data() {
    return {
      zbslList: [],
      anhuanProject: [],
    };
  },
  props: ["ZdxmData"],
  created() {
    // console.log(this.ZdxmData);
    this.getAnhuanProject();
  },
  methods: {
    handleClick(item) {
      console.log(item);
      this.$emit("checkProject", item, 2);
    },

    getAnhuanProject() {
      anhuanProject().then((res) => {
        this.zbslList = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.zdxmPage {
  height: 100%;
  overflow: hidden;
  transition: 0.5s;
  padding: 10px 0;
  box-sizing: border-box;

  > div {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;

    ul {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
      padding: 0 20px;
      box-sizing: border-box;

      &:before {
        position: absolute;
        content: "";
        top: 5px;
        left: 155px;
        bottom: 5px;
        width: 1px;
        background: rgba(23, 53, 107, 0.4);
      }

      li {
        display: flex;
        flex-direction: row;
        padding: 5px 0;
        transition: 0.5s;

        &:hover {
          > label,
          > b {
            color: #0efadf;
          }

          > div {
            background: linear-gradient(
              to right,
              rgba(14, 250, 223, 0),
              rgba(14, 250, 223, 0.08)
            );

            > div {
              background: linear-gradient(
                to right,
                rgba(14, 250, 223, 0),
                rgba(14, 250, 223, 0.3),
                rgba(14, 250, 223, 1)
              );
            }
          }
        }

        > label {
          width: 50%;
          height: auto;
          line-height: 20px;
          font-size: 13px;
          text-align: right;
          color: #d0e0fe;
          font-weight: normal;
          display: inline-block;
          overflow: hidden;
          display: flex;
          justify-content: right;
          align-items: center;
          margin-right: 20px;
          transition: 0.5s;
        }

        > div {
          width: 100%;
          height: 40px;
          background: linear-gradient(
            to right,
            rgba(23, 53, 107, 0),
            rgba(23, 53, 107, 0.26)
          );
          flex: 1;
          overflow: hidden;
          transition: 0.5s;

          > div {
            width: 100%;
            height: 14px;
            margin-top: 13px;
            background: linear-gradient(
              to right,
              rgba(20, 146, 253, 0),
              rgba(20, 146, 253, 0.3),
              rgba(20, 146, 253, 1)
            );
            transition: 0.5s;
          }
        }

        > b {
          width: 36px;
          height: 40px;
          line-height: 40px;
          display: inline-block;
          color: #8da8d5;
          font-weight: normal;
          font-size: 14px;
          overflow: hidden;
          margin-left: 15px;
          transition: 0.5s;
        }

        > p {
          width: 30px;
          height: 40px;
          line-height: 40px;
          display: inline-block;
          text-align: right;
          margin: 0;
          color: #fd5b1b;
          font-size: 14px;
        }
      }
    }
  }
}

*::-webkit-scrollbar {
  width: 0px;
  height: 10px;
}
</style>
